<extend name="Public/base"/>

<block name="style">
    <script type="text/javascript" src="__STATIC__/uploadify/jquery.uploadify.min.js"></script>
</block>
<block name="body">
    <div class="main-title">
        <h2>[{$meta.title}]</h2>
    </div>

    <div class="cf" id="upload-box">
        <form action="{:U()}" id="upload-form" method="post" class="form-horizontal">
            <div id="upload-area" style="width: 100%;float: none">
                <div class="upload-img-box">
                </div>
                <input type="file" id="upload_album_picture">
                <div class="picture-show">
                    <p>点击选择图片按钮上传新图片</p>
                    <p>click button above upload</p>
                </div>
            </div>
            <div class="meta-area" style="width: 100%;float: none;margin-top: 15px">

                <div class="cf">
                    <button class="btn submit-btn ajax-post hidden" id="submit" type="submit" target-form="form-horizontal">确 定</button>
                    <button class="btn btn-danger" id="reset" type="reset" >清 空</button>
                    <input type="hidden" name="pic_id" value="0"/>
                </div>

            </div>

        </form>
    </div>
    <script type="text/javascript">
        //上传图片
        /* 初始化上传插件 */

        $("#upload_album_picture").uploadify({
            "height"          : 30,
            "swf"             : "__STATIC__/uploadify/uploadify.swf",
            "fileObjName"     : "download",
            "buttonText"      : "选择图片",
            "uploader"        : "{:U('File/uploadPicture',array('session_id'=>session_id()))}",
            "width"           : 120,
            'removeTimeout'	  : 1,
            /*限制上传类型和大小*/
            'fileTypeExts'	  : '*.jpg; *.JPG; ',
            'fileSizeLimit' :'2048KB',
            "onUploadSuccess" : uploadAlbumPicture,
            'onFallback' : function() {
                alert('未检测到兼容版本的Flash.');
            }
        });

        function uploadAlbumPicture(file, data){
            var data = $.parseJSON(data);
            var src = '';
            if(data.status){
                src = data.url || '__ROOT__' + data.path
                var $input = $('input[name="pic_id"]');
                var id = $input.val();
                var $showBox = $(".picture-show");
                if(id == 0){
                    id = data.id;
                    $showBox.empty();
                }   else {
                    id += ','+data.id;
                }
                $input.val(id);
                $showBox.append(
                        '<img width="100px" height="50" src="' + src + '"/>'
                );

            } else {
                updateAlert(data.info);
                setTimeout(function(){
                    $('#top-alert').find('button').click();
                    $(that).removeClass('disabled').prop('disabled',false);
                },1500);
            }

        }
        //导航高亮
        highlight_subnav("{:U('index')}");

    </script>
    <hr/>
</block>